<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Web 设计</title>
<link rel="shortcut icon" href="/mylogo/logo_k_icon_72.ico" type="image/x-icon" />

<style type="text/css">
#div1 {
 position:absolute;
 left:338px;
 top:91px;
 width:446px;
 height:294px;
 z-index:1;
 border:solid #7A7A7A 4px; 
}
</style>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#div1").hide(); //先让div隐藏
        $("#span1").click(function(){
            $("#div1").fadeIn("slow");//淡入淡出效果 显示div
        });
        $("#span2").click(function(){
            $("#div1").fadeOut("slow");//淡入淡出效果 隐藏div
        })
    });
</script>

</head>

<body>

1个简单弹出div的小例子 页面不是很美观 效果达到了<p/><p/><p/><p/><p/><p/>

<span style="cursor:pointer" id="span1">点我弹出div</span>

<div id="div1">
    <div align="right" style="background-color:#CDCDCD;"><span id="span2" style="cursor:pointer">关闭</span>
    </div>
    <p><p>
    <form>
        username:<input  type="text"/><p />
        age:<input  type="text"/><p />
        <input  type="submit" value="submit"/><br />
    </form>
</div>
</body>
</html>
